<template>
  <div>
    <div class="flex">
      <div>
        <el-button icon="el-icon-back" @click="goBack">返回</el-button>
      </div>
      <h3>{{title}}</h3>
    </div>
    <el-form :inline="true" :model="queryForm" @keyup.enter.native="getDataList()">
      <el-form-item label="章节名称">
        <el-input v-model="queryForm.studying_detail_name" maxlength="20" placeholder="章节名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryForm.has_status" placeholder="请选择" clearable>
          <el-option label="上架" :value="1"></el-option>
          <el-option label="下架" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList()">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="openDialog()">新增章节</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{(queryForm.page - 1) * queryForm.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="studying_detail_name" header-align="center" align="center" label="章节名称">
      </el-table-column>
      <el-table-column prop="receive_time" header-align="center" align="center" label="缩略图">
        <template slot-scope="{row}">
          <el-popover placement="left" title trigger="hover">
            <img :src="row.studying_detail_url" style="height: 200px;margin-right: 10px;">
            <img slot="reference" :src="row.studying_detail_url" @click="$openImg(row.studying_detail_url)" style="height: 50px;width: 50px;margin-right: 10px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="video_length" header-align="center" align="center" label="课程时长(分钟)">
      </el-table-column>
      <el-table-column prop="video_size" header-align="center" align="center" label="大小(MB)"></el-table-column>
      <el-table-column prop="video_click" width="180px" header-align="center" align="center" label="播放次数">
        <template slot-scope="{row}">
          {{row.video_click||0}}
        </template>
      </el-table-column>
      <el-table-column prop="has_order" header-align="center" align="center" label="排序">
      </el-table-column>
      <el-table-column prop="create_time" width="180px" header-align="center" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="has_status" width="180px" header-align="center" align="center" label="状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.has_status">上架</el-tag>
          <el-tag v-else type="danger">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="openDialog(row)">修改</el-button>
          <el-button type="text" size="small" v-if="!row.has_status" @click="changeSatus(row)">上架</el-button>
          <el-button type="text" size="small" v-else @click="changeSatus(row)">下架</el-button>
          <el-button type="text" size="small" @click="delItem(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="queryForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryForm.limit" :total="total" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog :title="form.id?'修改':'新增'" top="5vh" :visible.sync="visible" width="60%" center @close="handleClose">
      <el-form ref="form" :model="form" v-loading="formLoaidng" :rules="rules" label-width="120px">
        <el-form-item label="章节名称：" prop="studying_detail_name">
          <el-input v-model="form.studying_detail_name" maxlength="20" placeholder="章节名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="缩略图：" prop="studying_detail_url">
          <uploadImg @updataImg="updataImg" :limit="1" :value="blackImg" :dialogVisible="visible" style="" :zi='true'></uploadImg>
        </el-form-item>
        <el-form-item label="序号：" prop="has_order">
          <el-input-number v-model="form.has_order" :precision="0" :min="1" label="序号"></el-input-number>
        </el-form-item>
        <el-form-item label="文件：" prop="studying_detail_content_url">
          <el-input v-model="form.studying_detail_content_url" @input="$forceUpdate()" placeholder="视频地址" clearable></el-input>
          <videoList @updataVideo='updataVideo' :videoUrl="form.studying_detail_content_url"></videoList>
        </el-form-item>
        <el-form-item label="时长：" prop="video_length">
          <el-input v-model="form.video_length" onblur="value=parseInt(value*100)/100||0" style="width:200px" maxlength="20" placeholder="时长" clearable></el-input> 分钟
        </el-form-item>
        <el-form-item label="大小：" prop="video_size">
          <el-input style="width:200px" v-model="form.video_size" onblur="value=parseInt(value*100)/100||0" maxlength="20" placeholder="大小" clearable></el-input> MB
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import videoStudyApi from '@/api/videoStudyApi.js'
import uploadImg from '@/views/modules/oss/oss-uploadImg2'
import videoList from '@/views/modules/oss/oss-uploadvideo'
export default {
  components: {
    uploadImg,
    videoList
  },
  data () {
    return {
      queryForm: {
        page: 1,
        limit: 10
      },
      timeArr: [],
      dataListLoading: false,
      dataList: [],
      total: 0,
      title: null,
      blackImg: [],
      visible: false,
      btnLoading: false,
      form: {
        video_size: "",
        video_length: "",
        studying_detail_content_url: ""
      },
      rules: {
        studying_detail_name: [
          { required: true, message: '请输入章节名称', trigger: 'change' },
        ],
        studying_detail_url: [
          { required: true, message: '请上传缩略图', trigger: 'change' },
        ],
        has_order: [
          { required: true, message: '请输入序号', trigger: 'change' },
        ],
        studying_detail_content_url: [
          { required: true, message: '请上传文件', trigger: 'change' },
        ],
        video_length: [
          { required: true, message: '请输入文件时间长', trigger: 'change' },
        ],
        video_size: [
          { required: true, message: '请输入文件大小', trigger: 'change' },
        ],
      },
      formLoaidng: false,
    }
  },
  created () {
    this.queryForm.studying = this.$route.query.id;
    this.form.studying = this.$route.query.id;
    this.title = this.$route.query.title;
    this.getDataList()
  },
  methods: {
    //上传之后
    updataImg (e) {
      this.form.studying_detail_url = e[0];
    },
    // 上传视频回调
    updataVideo (e, a = {}) {
      this.form.studying_detail_content_url = e;
      this.form.video_length = a.duration ? (a.duration / 100).toFixed(2) : 0;
      this.form.video_size = a.size ? a.size.toFixed(2) : 0
      this.$forceUpdate()
    },
    goBack () {
      this.$router.go(-1)
    },
    timeArrChange (e) {
      if (e && e.length == 2) {
        this.queryForm.start_time = e[0];
        this.queryForm.end_time = e[1];
      } else {
        this.queryForm.start_time = '';
        this.queryForm.end_time = '';
      }
    },
    getDataList () {
      this.dataListLoading = true;
      for (let v in this.queryForm) {
        if (this.queryForm[v] === '' || this.queryForm[v] === null) {
          delete this.queryForm[v]
        }
      }
      videoStudyApi.studyingDetailList(this.queryForm).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list;
          this.total = res.data.page.totalCount;
        }
        this.dataListLoading = false;
      })
    },
    reset () {
      this.queryForm = {
        page: 1,
        limit: 10,
        studying: this.$route.query.id
      }
      this.getDataList()
    },
    // 开启弹窗
    openDialog (item) {
      this.form.studying = this.$route.query.id
      this.visible = true;
      if (item && item.id) this.getDetails(item.id)

    },
    // 获取详情
    getDetails (id) {
      this.formLoaidng = true;
      videoStudyApi.studyingDetail(id).then(res => {
        if (res && res.data.code == 200) {
          this.form = res.data.data;
          this.blackImg = [this.form.studying_detail_url];
        }
        this.formLoaidng = false;
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryForm.limit = val
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryForm.page = val
      this.getDataList()
    },
    // 关闭弹窗
    handleClose () {
      this.form = {};
      this.$refs.form.resetFields();
      this.visible = false;
    },
    // 提交
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.has_vip) this.form.has_vip = false
          if (this.form.id) {
            this.update()
          } else {
            this.add()
          }
        }
      })
    },
    // 新增
    add () {
      this.form.study_type = this.parentId
      this.btnLoading = true;
      videoStudyApi.studyingDetailAdd(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('新增成功！');
          this.getDataList()
          this.handleClose()
        }
        this.btnLoading = false;
      })
    },
    // 修改
    update () {
      this.btnLoading = true;
      videoStudyApi.studyingDetailUpdate(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('修改成功！');
          this.getDataList()
          this.handleClose()
        }
        this.btnLoading = false;
      })
    },
    // 修改状态
    changeSatus (item) {
      let status = item.has_status;
      videoStudyApi.studyingDetailDisable(item.id).then(res => {
        if (res && res.data.code == 200) {
          if (status) {
            this.$message.success('下架成功！')
          } else {
            this.$message.success('上架成功！')
          }
          this.getDataList()
        }
      })
    },
    // 删除章节
    delItem (id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoStudyApi.studyingDetailDel(id).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('删除成功！')
            this.getDataList()
          }
        })
      }).catch(() => { })
    },
  }
}
</script>

<style>
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
<style lang="scss" scoped>
h3 {
  margin-left: 20px;
}
</style>